<template>
  <div class="label-box-content pricechange">
    <div class="content-box content-roll">
      <NewCard :isright="true" title="内容" class="table" :border="false">
        <template #right>
          <ComForm :list="comForm"
            @EventReset="reset"
            @EventOnsubmit="inquireFn"></ComForm>
        </template>
        <div class="mb50">
          <ComTable
            @EventRowClick="RowClickFn"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :pagination="{
              total: pageing.total,
              pageNum: pageing.pageNum,
              pageSize: pageing.pageSize,
            }"
            :list="tableList"
            :modes="tableModes"
            v-hasPermi="['financial:expertBrokerage:listShare']">
              <el-table-column align="left" label="订单金额">
                <template slot-scope="scope">
                  <span >{{scope.row.voucher ? scope.row.voucher:0}}</span>
                </template>
              </el-table-column>

              <el-table-column align="left" label="交付分成">
                <template slot-scope="scope">
                  <span >{{scope.row.updateTime && scope.row.verifyAmount ? scope.row.verifyAmount:scope.row.amount}}</span>
                </template>
              </el-table-column>
            
              <el-table-column align="left" label="状态">
                <template slot-scope="scope">
                  <span style="color: #F87A23">{{selecstatus(scope.row.status)}}</span>
                </template>
              </el-table-column>
          </ComTable>
          
        </div>
      </NewCard>
      <NewCard :isright="true" :title="rightTitle" class="edit-box">
        <!-- <template slot="right">
            <p class="divideBtn" @click="drawer=true">调价记录 <i class="el-icon-document"></i></p>
        </template> -->
        <!-- 调价记录抽屉 -->
        <div class="apply-divide">
            <el-drawer
                title="调价记录"
                :visible.sync="drawer"
                size="30%"
                direction="rtl">
                <div class="record">
                    <ul>
                        <li>
                            <h3>
                                <p><i></i>审价通过</p>
                                <p>20220506 19:09:45</p>
                            </h3>
                            <p><b>审批金额：</b>2000元</p>
                        </li>
                        <li>
                            <h3>
                                <p><i></i>申请调价</p>
                                <p>20220506 19:09:45</p>
                            </h3>
                            <p><b>申请金额：</b>2000元</p>
                            <p><b>原分成：</b>1700元</p>
                            <p><b>申请原因：</b>客户地处偏远地区，需要增加差旅费</p>
                        </li>
                    </ul>
                </div>
            </el-drawer>
        </div>
         <div class="pricing-for">
            <el-form ref="form" :rules="rules" :model="editForm" label-width="100px" label-position="left">
                <el-form-item label="订单号">
                    <el-input v-model="editForm.orderNo" disabled></el-input>
                </el-form-item>
                <el-form-item label="订单名称">
                    <el-input v-model="editForm.title" disabled></el-input>
                </el-form-item>
                <el-form-item label="当前分成">
                    <el-input v-model="editForm.verifyAmount" disabled></el-input>
                </el-form-item>
                <el-form-item label="调整分成" prop="verifyAmount">
                    <el-input v-model="verifyAmount" placeholder="请输入调整的金额"></el-input>
                </el-form-item>
                <el-form-item label="调价原因" prop="msg">
                    <el-input type="textarea" :rows="6" v-model="editForm.msg" placeholder="请输入调价原因" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <SubBtn>
                <template slot="btn">
                    <el-button round @click="resetForm('form')">重设</el-button>
                    <el-button type="primary" :disabled="editForm.orderNo? false:true" @click="submit" round v-hasPermi="['financial:expertBrokerage:updateShare']">确认</el-button>
                </template>
            </SubBtn>
        </div>

      </NewCard>
    </div>

    <!-- 修改内容定价 end-->
  </div>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";
import SubBtn from "@/wss/components/subBtn.vue";
import {
  getreadjustPricesApi,
  editreadjustPricesApi,
  editorderCommissionApi
} from "@/wss/newApi_3-24/BK/aricereview/index";
import ComTable from "@/wss/components/comTable.vue";

import NewCard from "@/wss/components/newCard.vue";
import ComForm from "../../../components/comForm.vue";
export default {
  components: {
    ComTable,
    SubBtn,
    NewCard,
    ComForm,
  },
  data() {
    return {
      // 调价记录抽屉
     drawer:false,
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "失败",
          },
        ],
      },
      comForm: {
        modes: [
          {
            placeholder: "订单号",
            formType: "input",
            mode: "orderNo",
            label: "",
            value: "",
          },
           {
            placeholder: "专家名称",
            formType: "input",
            mode: "expertName",
            label: "",
            value: "",
          },

        ],
      },
      //申请分成
      verifyAmount:"",
       rules: {
        verifyAmount: [{ required: true, message: "请输入调整金额", trigger: "blur" }],
        cause: [
          { required: true, message: "请输入申请原因", trigger: "blur" },
        ],
     
       
      },
      // 右侧的新增或者编辑
      rightTitle: "编辑",
      padding: padding,
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },

      isAdd: true,
      // 表格数据
      tableList: [],
      newtableList:[],
      total:"",
      // 表格配置
      tableModes: [
        {
          label: "订单号",
          mode: "orderNo",
          showOverflowTooltip: true,
          // width: 100,

        },
        {
          label: "专家",
          mode: "expertName",
          // width: 100,

          showOverflowTooltip: true,
        },
        {
          label: "订单类型",
          mode: "orderType",
          // width: 100,
          options: [
            // 跳转类型 1 法律 2 问答 3 头条 4 合同 5 咨询
            {
              l: "咨询",
              v: 5,
            },
            {
              l: "项目",
              v: 6,
            },
          ],

          showOverflowTooltip: true,
        },
        {
          label: "订单名称",
          mode: "title",
          width: 300,

          showOverflowTooltip: true,
        },
        // {
        //   label: "订单金额",
        //   mode: "voucher",
        //   showOverflowTooltip: true,
        //   // width: 100,
        //   effectiveStatus: true,
        // },
        // {
        //   label: "交付分成",
        //   mode: "verifyCommission",
        //   showOverflowTooltip: true,
        //   width: 120,
        //   effectiveStatus: true,
        // },
       
      ],
      // 修改定价参数
      editForm: {},

      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      //修改内容定价 标题宽度
      formLabelWidth: "120px",
     
    };
  },
  created() {
    this.getreadjustPricesApiFn();
  },

  methods: {
    //状态的判断
    selecstatus(value) {
      const stateMap = {
        "0": "未提现 ",
        "3": "进行中"
      };
      return stateMap[value];
    },
    async getreadjustPricesApiFn(data) {
      let { pageNum, pageSize } = this.pageing;
      let { code, rows, total } = await getreadjustPricesApi({
        pageNum,
        pageSize,
        orderNo: data && data.orderNo,
        expertName: data && data.expertName,
      
      });
      if (code != 200) return;
      this.tableList = JSON.parse(JSON.stringify(rows));
      this.newtableList= JSON.parse(JSON.stringify(rows))
      this.pageing.total = total;
    },
    //提交修改
   async submit(){
    console.log(this.editForm,"this.editForm")
    let newform={
      expertName: this.editForm.expertName,
      status: this.editForm.status,
      id:this.editForm.id,
      orderNo: this.editForm.orderNo,
      title: this.editForm.title,
      orderType:this.editForm.orderType,
      verifyAmount:this.verifyAmount,
      
      // verifyTime: this.editForm.verifyTime,
      msg:this.editForm.msg
    }
    // let newdata=[]
    // newdata.push(newform)
    try {
      await this.$refs.form.validate();
     console.log(this.editForm,"editForm")
      let {code} = await editorderCommissionApi(newform);
      if (code==200) {
         this.$message({
          message: "操作成功",
          type: 'success'
        });
        this.editForm.msg="";
        this.verifyAmount=""
        this.getreadjustPricesApiFn();
      }
    } catch (error) {
    }
   },
   //重置
   resetForm(formName) {
    this.verifyAmount=""
        this.$refs[formName].resetFields();
      },
    // 表格行被点击了
    RowClickFn(row) {
      console.log(row,"row");
      this.isAdd = false;
      let changeRow = JSON.parse(JSON.stringify(row));
       if (changeRow.verifyAmount) {
         changeRow.verifyAmount=changeRow.verifyAmount
      } else {
        changeRow.verifyAmount=changeRow.amount
      }
      this.editForm = changeRow;
    },

    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getreadjustPricesApiFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getreadjustPricesApiFn();
    },
     reset() {
      this.form = {
        orderNo: "",
        expertName: "",
        expertStatus:""
      };
      // this.pageing = { pageNum: 1, pageSize: 10,};
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    inquireFn(paramsArr) {
        let data = {
        orderNo: paramsArr[0].orderNo,
        expertName: paramsArr[1].expertName,
      };
      this.getreadjustPricesApiFn(data)
      console.log(paramsArr,"45655");
    },
  },
  
};
</script>

<style scoped>
.pricechange >>> .el-card__body{
  height: 100%;
}
.pricechange >>> .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
.pricechange >>> .el-card__body>div::-webkit-scrollbar{
  width: 0;
}
.mb50{
  margin-bottom: 20px;
}
</style>

<style lang="scss" scoped>
.label-box-content {
  height: 100%;
}

.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
.content-box {
  background-color: #ffffff;
  // padding: 20px;
  display: flex;
  height: 100%;
  .table {
    flex: 1.4;
    margin-right: 20px;
  }
  .edit-box {
    flex: 0.7;
    position: relative;
  }
}
/* 调价记录 */
.divideBtn{
    font-size: 12px;
    color: #606E84;
    cursor: pointer;
}
::v-deep .apply-divide .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .apply-divide .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
ul,h3,h4,p{
  list-style: none;
  margin: 0;
  padding: 0;
}
.record{
    padding: 0 20px;
}
.record li{
    position: relative;
}
.record li>h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #909AAA;
    margin-top: 15px;
    margin-bottom: 15px;
}
.record li::before{
    content: '';
    position: absolute;
    left: 1.5px;
    top: 10px;
    display: block;
    width: 1px;
    height: 115%;
    background-color: #EFEFEF;
}
.record li>h3 i{
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #909AAA;
    margin-right: 5px;
}
.record li>h3>p:first-child{
    display: flex;
    align-items: center;
}
.record li>h3>p:last-child{
    font-size: 12px;
    font-weight: 400;
    color: #909AAA;
}
.record li>p{
    margin-left: 10px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;
    color: #2E3F5E;
}
.record li>p>b{
    display: inline-block;
    font-weight: 400;
    width: 20%;
}
.record li:last-child::before{
    display: none;
}
/* 调价记录 end*/
/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary,
.addBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
.hintRight {
  font-size: 12px;
  color: #999;
}
.el-descriptions {
  padding-top: 10px;
}
::v-deep .el-descriptions-item__container {
  padding: 3px;
}
::v-deep .el-descriptions-item__label.has-colon::after{
  content: "";
    position: relative;
    top: -0.5px;
}
</style>